<script setup lang="ts">
import { inject, ref } from 'vue'
import { Node } from '@antv/x6'
import './node-style.scss'

const formData = reactive<any>({
  conditions: []
})
const condition = reactive<{
  op?:string,
  value?:string
}>({
  op: undefined,
  value: undefined
})
const id = ref<string>()
const ops = {
  GT: '大于',
  EQ: '等于',
  LT: '小于',
  IS_NULL: '为空',
  IS_FILE_TYPE: '文件类型'
}
const getNode = inject<() => Node>('getNode')
if (getNode) {
  const node = getNode()
  id.value = node.id
  node.setData(formData)
}
onBeforeMount(() => {
  if (getNode) {
    const node = getNode()
    const d = node.getData()
    if (d) {
      Object.assign(formData, d)
    } else {
      node.setData(formData)
    }
  }
})
const addCondition = () => {
  const c = { ...condition }
  condition.op = undefined
  condition.value = undefined
  formData.conditions.push(c)
}
const del = (c) => {
  formData.conditions = formData.conditions?.filter((v) => v !== c)
}
onMounted(() => {})
watch(
  formData,
  () => {
    if (getNode) {
      const node = getNode()
      //console.log('node.setData', node, formData)
      node.setData(formData, { deep: true, overwrite: true })
    }
  },
  { deep: true, immediate: false }
)
</script>

<template>
  <div class="node">
    <div class="line5 node-title">
      <div
        class="flow-dot"
        magnet="true"
        :class="'flow-exec'"
        x-type="input-exec"
        :x-id="'input-if_' + id"
      ></div>
      <div>IF</div>
    </div>
    <div class="line5">
      <el-select v-model="condition.op">
        <el-option v-for="k in Object.keys(ops)" :value="k" :label="ops[k]" :key="k" />
      </el-select>
      <template v-if="condition.op">
        <template v-if="['GT','EQ','LT','IS_NULL'].includes(condition?.op)">
          <el-input v-model="condition.value" :disabled="condition.op === 'IS_NULL'" />
        </template>
        <template v-if="'IS_FILE_TYPE'===condition.op">
          <el-select v-model="condition.value">
            <el-option label="视频文件" value="VIDEO_FILE"/>
            <el-option label="音频文件" value="AUDIO_FILE"/>
            <el-option label="文本文件" value="DOC_FILE"/>
            <el-option label="图片文件" value="IMG_FILE"/>
            <el-option label="压缩文件" value="COMPRESS_FILE"/>
            <el-option label="未知类型文件" value="UNKNOW_FILE"/>
          </el-select>
        </template>
      </template>
      <el-button @click="addCondition">添加</el-button>
    </div>
    <div>
      <div class="line5">
        <div
          class="flow-dot flow-any"
          magnet="true"
          x-type="input-any"
          :x-id="'input-any_' + id"
        ></div>
        <div>输入</div>
      </div>
      <div class="line5" v-for="(c, index) in formData.conditions" :key="index">
        <span class="flow-right">IF</span>
        <span>{{ ops[c.op] }}</span>
        <span>{{ c.value }}</span>
        <el-button type="danger" link @click="del(c)">删除</el-button>
        <div
          class="flow-dot flow-exec"
          magnet="true"
          x-type="output-exec"
          :x-key="c.value"
          :x-op="c.op"
          :x-id="`output-exec_:else${index}_+${id}`"
        ></div>
      </div>
    </div>
    <div class="line5">
      <span class="flow-right">ELSE</span>
      <div
        class="flow-dot flow-exec"
        magnet="true"
        x-type="output-exec"
        x-key="output-else"
        x-op="else"
        :x-id="`output-exec_:else_+${id}`"
      ></div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
